<!--
 * @Author: your name
 * @Date: 2021-12-05 22:34:06
 * @LastEditTime: 2021-12-06 13:37:32
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue_shop\src\components\Login.vue
-->
<template>
  <div class="login-container">
    <div class="login-box">
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
 
    <!-- 登录表单区域   ref绑定本dom的实例对象名字   Vue实例$refs就可以获得的dom实例对象 名字是 ref="xxx"-->
    <el-form ref="loginFormRef" label-width="0" class="form-box" :model="loginForm" :rules="loginFromRules">
    <!-- 用户名 -->
      <el-form-item prop="username">
        <el-input v-model.trim="loginForm.username" prefix-icon="el-icon-s-custom" ></el-input>
      </el-form-item>
    <!-- 密码 -->
      <el-form-item prop="password">
        <el-input type="password" v-model.trim="loginForm.password" prefix-icon="el-icon-unlock" ></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <div class="btn">
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="info" @click="resetLoginForm">重置</el-button>
      </div>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm:{
        username:'',
        password:''
      },
      // 表单规则验证
      loginFromRules: {
        // 验证用户名是否合法
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ],
          // 验证密码
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {min: 6, max: 6, message: '长度为6个字符', trigger: 'blur'}
          ],
      },
      
    }
  },
  methods: {
        resetLoginForm(){
          this.$refs.loginFormRef.resetFields()
          localStorage.removeItem('token')
        },
        login(){
          // this.$refs.loginFormRef.validate(valid => {
          //   if(!valid){
          //     return false
          //   }
          // })
          if(this.loginForm.username==='admin' && this.loginForm.password=== '123456') {
              // 登录成功 储存密码 token
              this.$message.success({
                message: '登录成功',
                duration : 1500,
                showClose: true
              })
              localStorage.setItem('token', 'Bearer xxxx')
              this.$router.push('/home')
              }else{
                localStorage.removeItem('token')
                this.$message.error({
                message: '用户名或密码错误',
                duration : 1500,
                showClose: true
              })
                return false
              }
        }
      },
}
</script>

<style lang="less" scoped>
  .login-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #2b4b6b;
  }
  .login-box{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  }
  .logo{
  align-self: center;
  margin-top: -65px;
  padding: 10px;
  height: 130px;
  width: 130px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 50%;
  box-shadow: 0 0 10px #ddd;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    } 
  }
  .form-box{
  padding: 20px;
  }
  .btn{
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  }
</style>